﻿function addHeader() {
  let str = `

    <div class="nav_box">
    <div class="center nav_drop">
    <div class="nav-logo">
      <a href="/">
        <img src="/images/head/logo@2x.webp" /></a>
    </div>
    <div>
      <ul class="nav-content">
        <li><a href="/handbook">七夕限定礼盒</a></li>
        <li><a href="/valentine">送礼指南</a></li>
        <li class="nav-sub-drp">
          <a href="/makeup">彩妆</a>
        </li>
        <li class="nav-sub-drp">
          <a href="/perfume">香水</a>
        </li>
        <li class="nav-sub-drp">
          <a href="/skincare">护肤</a>
        </li>
        <li><a href="/customizedService"> 定制服务</a></li>
        <li><a href="/memberCenter"> 会员中心</a></li>
        <li><a href="/brandStory"> 品牌故事</a></li>
      </ul>
    </div>
    <div class="nav-img">
      <ul>
        <li>
          <a href="#"><img src="/images/head/放大镜.png" /></a>
        </li>
        <li>
          <a href="#"><img src="/images/head/用户.png" /></a>
        </li>
        <li>
          <a href="#"><img src="/images/head/购物袋1-01.png" /></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
  <header>
    <!-- 页头轮播广告 -->
    <div class="header_topbanner">
      <div class="top_promo">
        <div class="swiper swiper123 center">
          <div class="swiper-wrapper top-banner">
            <div class="swiper-slide">
              <a href="#">YSL七夕限定「独家唇情」礼盒，给你的，总与别人不同</a>
            </div>
            <div class="swiper-slide">
              <a href="#">YSL七夕限定「双向奔赴」礼盒，我跨山海赴你，你持赤诚而来</a>
            </div>
            <div class="swiper-slide">
              <a href="#">YSL七夕为爱奔赴，专属高定礼盒，任购臻享免费刻字礼遇</a>
            </div>
            <div class="swiper-slide">
              <a href="#">YSL七夕限定「爱与自由」礼盒，我是爱你的，你是自由的</a>
            </div>
          </div>
          <div class="icn-left swiper-button-prev"></div>
          <div class="icn-right swiper-button-next"></div>
        </div>
        <span class="icn-outtime"><img src="/images/head/语音关闭.png"></span>
      </div>
    </div>
    <!-- logo -->
    <div class="header-logo center">
      <div class="common-wrapper">
        <!-- 左边导航栏 -->
        <ul class="header-logo-left">
          <li>
            <a href="#"><img src="/images/head/地图_定位_o (1).png" class="icn-map"></span>专柜查询 </a>
          </li>
          <!-- 客服中心下拉框 -->
          <li class="customer">
            <a class="customer-service" href="#">客服中心</a>
            <div class="hp-drop">
              <div class="sub-menu">
                <div class="left">
                  <div class="title">
                    <h4>我能帮到您什么？</h4>
                  </div>
                  <div class="center">
                    <ul>
                      <li>
                        <a href="#">
                          <span>常见问题</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span>订单跟踪</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span>订购信息</span>
                        </a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <span>选择我们的原因</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span>送货与退货</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span>通用销售条款</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="right">
                  <div class="title">
                    <h4>联系我们</h4>
                  </div>
                  <div class="center">
                    <ul>
                      <li><span>400-820-6362(9:00-18:00)</span></li>
                      <li><a href="#"><span>在线咨询</span></a></li>
                      <li><span>我们提供一周五天服务</span></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 页头logo -->
        <div class="b-logo">
          <a href="/">
            <img src="/images/head/logo@2x.webp" title="YSL圣罗兰美妆官方网站暨网上商城" />
          </a>
        </div>
        <!-- 右边用户模块 -->
        <ul class="header-logo-right">
          <li class="about-us">
            <a href="#">关注我们</a>
            <div class="qr-code">
              <ul>
                <li><img src="/images/head/gz_xcx.jpg">
                  <p>小程序商城</p>
                </li>
                <li><img src="/images/head/footer-qr-code-white.png">
                  <p>微信公众号</p>
                  </img>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a class='modelLogin makeLogin'>
              <span class="icon-myaccount"><img src="/images/head/用户.png"></span><span class='userInfo'>登录</span></a>
              
              <a class='modelLogin makeLogin'> 
<span class="split"></span>
              <span class='userInfo userLog'>注册</span></a>
          </li>
          <li class="header-shopping-bag">
            <a href="#"><img src="/images/head/购物袋1-01.png">
              <span class="sop-count">购物袋(0)</span></a>
            <div class="sop-drp">
              <div class="sop-left-box">
                <h2 class="title">您的购物袋为空</h2>
                <a href="#" class="button">浏览最新商品</a>
              </div>
              <div class="sop-right-box">
                <h2 class="title">推荐商品</h2>
                <ul class="product">
                  <li>
                    <img src="/images/head/16076788192233509_500X500.webp">
                    <div class="text">
                      <p>圣罗兰纯口红</p>
                      <p>高定缎光 唇粹自我</p>
                      <p>¥335</p>
                    </div>
                  </li>
                  <li>
                    <img src="/images/head/15501189641125780_500X500.webp">
                    <div class="text">
                      <p>圣罗兰恒颜无瑕粉底液</p>
                      <p>高度遮瑕 哑而不干</p>
                      <p>¥600</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav-container center">
      <!-- 分类搜索导航栏 -->
      <ul class="nav-content">
        <li><a href="/valentine">七夕限定礼盒</a></li>
        <li><a href="/handbook">送礼指南</a></li>
        <li class="nav-sub-drp">
          <a href="/makeup">彩妆</a>
          <div class="nav-sub-list-1">
            <div class="nav-sub-wrapper">
              <div class="view-all">
                <ul>
                  <li><a href="#">唇部</a></li>
                  <li><a href="#">唇膏</a></li>
                  <li><a href="#">唇釉</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="#">面部</a></li>
                  <li><a href="#">妆前隔离</a></li>
                  <li><a href="#">粉底</a></li>
                  <li><a href="#">粉饼</a></li>
                  <li><a href="#">明彩笔</a></li>
                  <li><a href="#">散粉</a></li>
                  <li><a href="#">腮红</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="">眼部</a></li>
                  <li><a href="">眉笔</a></li>
                  <li><a href="">浏览全部</a></li>
                </ul>
              </div>
              <div class="pic">
                <div>
                  <img src="/images/head/16577004183144226.webp">
                  <div><a href="#">YSL「小金条」</a></div>
                </div>
                <div>
                  <img src="/images/head/16577004327225168.webp">
                  <div><a href="#">YSL「皮气垫」</a></div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-sub-drp">
          <a href="/perfume">香水</a>
          <div class="nav-sub-list-1">
            <div class="nav-sub-wrapper">
              <div class="view-all">
                <ul>
                  <li><a href="#">女士香水</a></li>
                  <li><a href="#">全新圣罗兰女士香水</a></li>
                  <li><a href="#">反转巴黎香水</a></li>
                  <li><a href="#">黑色奥飘茗香水</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="#">男士香水</a></li>
                  <li><a href="#">Y男士香水</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="">高定香水</a></li>
                  <li><a href="">衣典香水</a></li>
                  <li><a href="">浏览全部</a></li>
                </ul>
              </div>
              <div class="pic">
                <div>
                  <img src="/images/head/16577003474418230.webp">
                  <div><a href="#">YSL「自由之水」</a></div>
                </div>
                <div>
                  <img src="/images/head/16577003534247509.webp">
                  <div><a href="#">YSL反转巴黎香水</a></div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-sub-drp">
          <a href="/skincare">护肤</a>
          <div class="nav-sub-list-1">
            <div class="nav-sub-wrapper">
              <div class="view-all">
                <ul>
                  <li><a href="#">按产品分类</a></li>
                  <li><a href="#">隔离防晒</a></li>
                  <li><a href="#">卸妆清洁</a></li>
                  <li><a href="#">爽肤水</a></li>
                  <li><a href="#">精华</a></li>
                  <li><a href="#">面霜/乳液</a></li>
                  <li><a href="#">眼唇护理</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="#">按功能分类</a></li>
                  <li><a href="#">全效青春</a></li>
                  <li><a href="#">至臻奢护</a></li>
                  <li><a href="#">基础亮颜</a></li>
                  <li><a href="#">浏览全部</a></li>
                </ul>
                <ul>
                  <li><a href="">按系列分类</a></li>
                  <li><a href="">高能修护系列</a></li>
                  <li><a href="">研活青春</a></li>
                  <li><a href="">藏金奢研</a></li>
                  <li><a href="">超模绝密</a></li>
                  <li><a href="">浏览全部</a></li>
                </ul>
              </div>
              <div class="pic">
                <div>
                  <img src="/images/head/16577003668262277.webp">
                  <div><a href="#">YSL「夜皇后」精华</a></div>
                </div>
                <div>
                  <img src="/images/head/16577003751213325.webp">
                  <div><a href="#">YSL「夜皇后」眼霜</a></div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li><a href="/customizedService"> 定制服务</a></li>
        <li><a href="/memberCenter"> 会员中心</a></li>
        <li><a href="/brandStory"> 品牌故事</a></li>
      </ul>
      <!-- 搜索框 -->
      <form action="#" method="get" class="form">
        <input type="text" placeholder="搜索商品" class="search" />
        <span class="icn-big"><img src="/images/head/放大镜1.png"></span>
      </form>
      <!-- 搜索下拉框 -->
      <div class="inp-drp">
        <div class="inp-drp-box center">
          <div class="inp-nav">
            <p>七夕</p>
            <img src="/images/head/放大镜.png">
          </div>
          <div class="inp-content">
            <div class="inp-left">
              <p>大家都在搜</p>
              <ul>
                <li> <a href="#">刻字</a></li>
                <li> <a href="#">小黑条</a></li>
                <li> <a href="#">粉气垫</a></li>
                <li> <a href="#">小金条28</a></li>
                <li> <a href="#">1966</a></li>
                <li> <a href="#">黑管416</a></li>
                <li> <a href="#">粉底液</a></li>
                <li> <a href="#">反转巴黎</a></li>
                <li> <a href="#">小金条21</a></li>
                <li> <a href="#">夜皇后精华</a></li>
              </ul>
            </div>
            <div class="inp-right">
              <p>历史浏览</p>
              <img src="/images/head/inp500X500.webp">
              <div class="wrapper">
                <p>圣罗兰七夕限定 「独家唇情」 礼盒</p>
                <p>¥1430</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 锚点导航 -->
  <div class="back-box">
    <div class="online-service">
      <img src="/images/foot/对话信息_填充 (1).png">
    </div>
    <div class="back-top goTop-hook">
      <img src="/images/head/图标_返回顶部.png">
    </div>
  </div>  
  </header>
    `;
  $("#header").html(str);
}

$(function () {
  addHeader();
  var mySwiper = new Swiper(".swiper123", {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    // pagination: {
    //     el: ".swiper-pagination",
    // },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    autoplay: {
      delay: 3000, //自动轮播
    },
  });

  $(".icn-outtime").click(() => {
    $(".header_topbanner").hide();
  });

  var currentOld = 0;
  $(window).scroll(() => {
    if ($(window).scrollTop() <= 200 || $(window).scrollTop() >= 1580) {
      $('.nav_box').css("display", "none");
      $('.nav_box').css("position", "fixed");
    } else {
      $('.nav_box').css("display", "block");
      $('.nav_box').css("position", "fixed");
    }
    if (currentOld < $(window).scrollTop()) {
      console.log($(window).scrollTop())
      $(".header_topbanner").css("position", "relative");
      currentOld = $(window).scrollTop();
    } else {
      console.log($(window).scrollTop())
      $(".header_topbanner").css("position", "fixed");
      currentOld = $(window).scrollTop();
      if ($(window).scrollTop() <= 0 || $(window).scrollTop() >= 1580) {
        $(".header_topbanner").css("position", "relative");
      }
    }
  });

  $(window).scroll(() => {
    if ($(window).scrollTop() >= 500) {
      $(".back-box").fadeIn(300);
    } else {
      $(".back-box").fadeOut(300);
    }
  });

  $(".goTop-hook").bind("click", () => {
    $("html").animate({ scrollTop: 0 }, 300);
  });

  $(".form").click(() => {
    $(".inp-drp").css({
      "max-height": "100%",
      "border-top": "1px solid #ddd",
      transition: "max-height 0.3s linear",
    });
  });

  $(".inp-drp").mouseleave(() => {
    $(".inp-drp").css({
      "max-height": "0",
      "border-top": "none",
      transition: "",
    });
  });

  $(".icn-outtime").click(() => {
    $(".inp-drp").css("top", "130px");
  });
});
